<template>
  <div class="login">
    <navbar>
      <div slot="center">登录</div>
    </navbar>
    <div class="limg">
      <img
        src="../../assets/images/user.png"
        alt=""
      >
    </div>
    <!-- res 就是 LoginText里面传过来的text -->
    <login-text
      label="邮箱"
      style="margin:5px 0"
      placeholder="请输入邮箱"
      rule="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      @inptuChange="res => email = res"
    />
    <login-text
      label="密码"
      style="margin:5px 0"
      placeholder="请输入密码"
      type="password"
      rule="^.{6,16}$"
      @inptuChange="res => password = res"
    />
    <span
      class="span"
      @click="got('/register')"
    >立即注册</span>
    <login-btn
      btn="登录"
      @registerClick='registerClick'
    ></login-btn>
  </div>
</template>
<script>

import Navbar from 'components/common/navbar/Navbar.vue'
import LoginText from '../../components/common/login/LoginText.vue'
import LoginBtn from '../../components/common/login/LoginBtn.vue'

/* 接口调用 */
import { getLogin } from '../../network/login'
import mixins from '../../mixins/index'

// import axios from 'axios'
// const http = axios.create({
//   baseURL: 'https://api.shop.eduwork.cn'
// })




export default {
  mixins: [mixins],
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    // succesIpt(res) {
    //   // console.log(res);
    //   this.name = res
    // }
    async registerClick() {
      let rulg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      if (!rulg.test(this.email)) {
        this.$toast('邮箱格式不对');
        return
      }
      if (this.password.trim() == null || this.password.trim() == "") {
        this.$toast('密码为空');
        return
      }
      if (this.password.trim().length < 6) {
        this.$toast('密码不能少于6个字符');
        return
      }
      // console.log(111);
      // const res = await getRegister({ name: this.name, password: this.passwordone, password_confirmation: this.passwordtwo, email: this.email })
      // const res = await http.post('/api/auth/register', { name: this.name, password: this.passwordone, password_confirmation: this.passwordtwo, email: this.email })
      const res = await getLogin(this.email, this.password)
      console.log(res);
      if (res == undefined) {
        this.$toast('登录失败!请输入正确的账号和密码!');
        return
      }
      if (res.token_type == 'Bearer') {
        /* 存储token */
        localStorage.setItem('token', res.access_token)
        // console.log('登录成功!');
        this.$toast('登录成功!');
        setTimeout(async () => {
          // await got('/login')
          await this.$router.push('/profile')
        }, 500)
      }
      // console.log(res);
    }
  },
  components: {
    Navbar,
    LoginText,
    LoginBtn
  }
}
</script>
<style lang='less' scoped>
.login {
  height: 100vh;
  position: relative;
  background-color: gainsboro;
  .limg {
    margin-top: 44px;
    background-color: white;
  }
  .span {
    display: block;
    // background: red;
    text-align: left;
    color: #3a90fa;
  }
}
.content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
